import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import ScoerEnlarge from '../scoerEnlarge'
import styles from './style.module.scss';
import Swiper from 'swiper/dist/js/swiper.js';
import 'swiper/dist/css/swiper.min.css';

class ScoreSwiper extends PureComponent {
    constructor (props) {
        super(props);
        this.state = {
            scoerEnlargeShow: false,
            scoerEnlargeIndex: 0,
            // data: [
            //     {
            //         img:'http://mobuz-live.oss-cn-hangzhou.aliyuncs.com/songlibs/Z2eLeZEQIM.jpg'
            //     },
            //     {
            //         img:'http://mobuz-live.oss-cn-hangzhou.aliyuncs.com/songlibs/bVWAzXJFS2_1544427376613.jpg'
            //     },
            //     {
            //         img:'http://mobuz-live.oss-cn-hangzhou.aliyuncs.com/songlibs/Z2eLeZEQIM.jpg'
            //     },
            // ]
        }
    }
    render () {
        const { scoerEnlargeShow , scoerEnlargeIndex } = this.state;
        const { data } = this.props;
        console.log(data)
        return (
            <div className={styles['score-img']}>
                {
                   // 图片长度大于2 显示分页器
                    (()=>{
                        if (data && (data.length > 2) ) {
                            return (
                                <div className={styles['swiper-button']}>
                                    <div className={styles['swiper-button-prev']} ref={swiperButtonPrev => this.swiperButtonPrev = swiperButtonPrev}>
                                    </div>
                                    <div className={styles['swiper-button-next']} ref={swiperButtonNext => this.swiperButtonNext = swiperButtonNext}>
                                    </div>
                                </div>
                            )
                        }
                    })()
                }
                
                <div className={styles['swiper-box']}>
                    <div className={`swiper-container ${styles['swiper-container']}`} ref={scoreSwiperObj => this.scoreSwiperObj = scoreSwiperObj}>
                        <div className={`swiper-wrapper ${styles['swiper-wrapper']}`}>
                            {
                                data.map( (item,index) => {
                                        return (
                                            <div className={`swiper-slide swiper-no-swiping ${styles['swiper-slide']}`}  key={JSON.stringify(item)+index}>
                                                <div className={styles['img-list']}>
                                                    <div className={styles['enlarge']}>
                                                        <div onClick={this.handleOpenEnlarge.bind(this,index)}>
                                                            <img src="https://mobuz-live.oss-cn-hangzhou.aliyuncs.com/web/icon/icon_enlarge%402x.png" alt="放大"/>
                                                        </div>
                                                    </div>
                                                    <div className={styles['show-img']}>
                                                        <img src={item} alt=""/>
                                                    </div>
                                                </div>
                                                
                                            </div>
                                        )
                                })
                            }
                        </div>
                        {/* <div className="swiper-pagination"></div> */}
                    </div>
                </div>
                {
                    // 图片放大器
                    (()=>{
                        if (scoerEnlargeShow) {
                            return (
                                <ScoerEnlarge data={data} index={scoerEnlargeIndex} closeEnlarge={this.closeEnlarge.bind(this)}/>
                            )
                        }
                    })()
                }
            </div>
        )
    }
    // 关闭放大器
    closeEnlarge (flag) {
        this.setState({
            scoerEnlargeShow: false
        })
    }
    // 打卡播放器
    handleOpenEnlarge (index) {
        this.setState({
            scoerEnlargeIndex: index,
            scoerEnlargeShow: true
        })
    }
    componentDidMount () {
        const {data} = this.props;
        const self = this;
        this.scoreSwiperObj = new Swiper (self.scoreSwiperObj, {
            width: 1152,
            slidesPerView : data.length > 1 ? 2 : 1,        // 网格分布两屏
            mousewheel: false,
            navigation: { // 如果需要前进后退按钮
              nextEl: self.swiperButtonNext,
              prevEl: self.swiperButtonPrev
            },
            lazy: {
                loadPrevNext: true,
            },
        });
    }
}

const mapState = (state) => ({

});

const mapDispatch = (dispatch) => ({

});


export default connect(mapState, mapDispatch)(withRouter(ScoreSwiper));